<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form v-if="dialogVisible" ref="addressForm" class="gl_form_mini" :model="addressForm" :rules="addressForm_rules" label-width="100px">
      <el-form-item label="收货人姓名" prop="consigneeName">
        <el-input v-model="addressForm.consigneeName" placeholder="请输入" type="text" size="mini" />
      </el-form-item>
      <el-form-item label="配送区域" prop="provinceCode">
        <el-cascader
          v-model="area"
          size="mini"
          :options="cache.district"
          :props="{ value: 'code', label: 'name' }"
          placeholder="请选择省市区"
          style="width: 100%;"
          @change="changeArea"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="addressForm.address" placeholder="请输入" type="textarea" :rows="2" size="mini" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input v-model="addressForm.phoneNumber" placeholder="请输入" type="text" size="mini" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="clickCancel">取消</el-button>
      <el-button :loading="buLoading" type="primary" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { CopyData } from '@/lib';
import { mapState, mapActions } from 'vuex';
import {
  api_POST_MallDeliveryAddress, // 创建收货地址
  api_PUT_MallDeliveryAddressId // 编辑收货地址
} from '@/extend/api/shoppingmallswaggerApi/app.js';
import {
  SiSTKWMallDeliveryAddressCreateInput
} from '@/lib/form/shoppingmall/swaggerForm.js';
import validator from '@/lib/validate/index.js';
export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      buLoading: false,
      addressForm: new SiSTKWMallDeliveryAddressCreateInput(),
      addressForm_rules: {
        consigneeName: [
          { required: true, message: '收货人不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkConsigneeName(value, '收货人姓名不能超过10个字'));
            },
            trigger: 'blur'
          }
        ],
        phoneNumber: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号格式错误'));
            },
            trigger: 'blur'
          }],
        address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
        provinceCode: [{ required: true, message: '所在地区不能为空', trigger: 'blur' }]
      },
      addressId: '', // 编辑使用的id
      area: [] // 配送区域
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache
    })
  },
  created() {
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDictByType: 'dict/getDictByType' }),
    open(title, data) {
      this.title = title;
      // this.addressForm.registerId = registerId;
      if (data) {
        this.addressId = data.id;
        this.area = [data.provinceCode, data.cityCode, data.countyCode];
        CopyData(data, this.addressForm);
      }
      this.dialogVisible = true;
    },
    // 修改省市区
    changeArea(val) {
      this.addressForm.provinceCode = val[0];
      this.addressForm.cityCode = val[1];
      this.addressForm.countyCode = val[2];
      this.$refs.addressForm.validateField('provinceCode');
    },
    // 新增 or 编辑
    submit() {
      const that = this;
      that.buLoading = true;
      that.$refs.addressForm.validate(valid => {
        if (valid) {
          // if (!that.addressForm.registerId) return;
          if (that.title === '新增收货地址') {
            api_POST_MallDeliveryAddress(that.addressForm).then(res => {
              that.buLoading = false;
              if (res) {
                that.$message({ type: 'success', message: '添加成功' });
                that.clickCancel();
                that.$parent.getAddress();
                that.$parent.isShowMore = false;
              }
            }, error => {
              that.buLoading = false;
              that.$message({ type: 'error', message: '添加地址失败！' + (error.error && error.error.message || '') });
            });
          } else {
            api_PUT_MallDeliveryAddressId(that.addressId, that.addressForm).then(res => {
              that.buLoading = false;
              if (res) {
                that.$message({ type: 'success', message: '操作成功' });
                that.clickCancel();
                that.$parent.getAddress();
                that.$parent.isShowMore = false;
              }
            }, error => {
              that.buLoading = false;
              that.$message({ type: 'error', message: '操作失败！' + (error.error && error.error.message || '') });
            });
          }
        } else {
          that.buLoading = false;
        }
      });
    },
    // 取消
    clickCancel() {
      this.area = [];
      this.addressForm = new SiSTKWMallDeliveryAddressCreateInput();
      this.dialogVisible = false;
    }
  }
};
</script>
